/**
* 比赛创建失败弹窗组件，使用： this.$store.dispatch('setModal', {visible: true, modalId: 'gameBuildFailModal',reason:reason,once:1}); 注意this指向的上下文环境，有时候是写self或其它
* once：可不传，当传1时标题显示不能创建比赛，用于一进页面就弹该弹窗时
*/
<template>
  <transition name="slide-fade">
    <div v-if="modal.visible && modal.modalId =='gameBuildFailModal'" class="modal" :id="modal.modalId" tabindex="-1"
         @click.stop.prevent="modalHide">

      <div class="modal-dialog" v-if="modal.modalId =='gameBuildFailModal'" @click.stop.prevent>
        <div class="modal-content">
          <img src="~assets/images/tankuang.png" class="img-responsive">
          <img src="~assets/images/close@2x.png" data-dismiss="modal" class="img-close" @click.stop.prevent="modalHide">
          <div class="oxhead">
            <img src="https://dl.app.gtja.com/nrng/shareimages/oxhead/niuyumen.png">
          </div>
          <div class="wrapper">
            <h4 v-if="modal.once==1"><span>不能创建</span>比赛</h4>
            <h4 v-else>比赛<span>创建失败</span></h4>
            <!--<p>残念，你的比赛被牛股星人劫走了...</p>-->
            <p>{{modal.reason}}</p>
            <button type="button" class="btn btn-lg" @click.stop.prevent="modalHide">好的，知道了</button>
          </div>
        </div>
      </div>

    </div>
  </transition>
</template>

<script>
  import BaseModal from 'components/modal/BaseModal'
  export default {
    data () {
      return {
      }
    },
    extends: BaseModal
  }
</script>

<style scoped>
  .slide-fade-enter-active,.slide-fade-leave-active{
    transition: all 0.3s ease;
  }
  .slide-fade-enter, .slide-fade-leave-active {
    transform: translate(0,-25%);
    opacity: 0;
  }
</style>
